<template>
  <div>
    <FormRelationDetailTabs
      :viewId.sync="viewId"
      :actionId.sync="actionId"
      :form-definition="formDefinition"
      :list-views-configs="listViewsConfigs"/>
    <div class="relation-form-wrapper">
      <FormEngine
        :view="viewId" :action="actionId"
        :form-definition="formDefinition" v-model="formModel"/>
    </div>
  </div>
</template>
<script>
import {createProps} from '@/utils';
import {getAction} from '@api/manage';
import FormRelationDetailTabs from '@comp/hhd/design/FormRelationManualDetailView/FormRelationDetailTabs.vue';
import FormEngine from '@comp/hhd/design/FormEngine/FormEngine.vue';
import {createFormDefinition, readFormDefinitionVo} from '@comp/hhd/design/FormDesigner/types';

export default {
  name: 'FormRelationView',
  components: {FormEngine, FormRelationDetailTabs},
  props: {
    relationDataId: createProps(String),
    relationDataProp: createProps(Object, () => ({})),
  },
  data() {
    return {
      viewId: undefined,
      actionId: undefined,
      formDefinition: createFormDefinition(),
      sourceFormDefinition: createFormDefinition(),
      listViewsConfigs: [],
      formModel: undefined,
      relationData: undefined,
      relation: undefined,
    };
  },
  mounted() {
    this.loadRelationFormData();
  },
  methods: {
    setData({formDefinition, formData, relationData, sourceFormDefinition}) {
      this.formDefinition = readFormDefinitionVo(formDefinition);
      this.sourceFormDefinition = readFormDefinitionVo(sourceFormDefinition);
      this.formModel = formData;
      this.relationData = relationData;
      this.parseListViewConfigs();
    },
    parseListViewConfigs() {
      let relations = this.sourceFormDefinition.relations || [];
      this.relation = relations.find(r => r.id === this.relationData.relationId);
      if (!this.relation) return;

      if (this.relation.manuals && this.relation.manuals.length) {
        let manuals = this.relation.manuals;
        manuals.forEach(manual => {
          if (manual.id === this.relationData.manualId) {
            this.manual = manual;
            this.listViewsConfigs = manual.fieldViewConfigs;
          }
        });
      }
      if (this.relation.auto && this.relation.auto.viewConfigs) {
        this.listViewsConfigs = this.relation.auto.viewConfigs;
      }
    },
    loadRelationFormData() {
      let relationDataId = this.relationDataId;
      this.loading = true;
      getAction('/form/loadRelationFormData', {
        relationDataId,
        ...this.relationDataProp
      }).then(data => {
        if (data.success) {
          this.setData(data.result);
        } else {
          this.$notification.error({message: data.message, duration: 3});
        }
        this.loading = false;
      }).catch(error => {
        console.log(error);
        this.loading = false;
        this.$notification.error({message: error, duration: 3});
      });
    }
  }
};
</script>
<style>
.relation-form-wrapper {
  display: flex;
  justify-content: center;
}
</style>